@rootsize:96rem;
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
img{
    border:0;
    vertical-align: middle;
}
a{
    text-decoration: none;
}
body{
    background: url(../images/bg.jpg) no-repeat 0 0 ;
    background-size: cover;
}

.viewport{
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 780px;
    background: url(../images/logo.png) no-repeat 0 0;
    padding:(88/@rootsize) (20/@rootsize) 0;
    .column{
        flex:3;
        .panel{
            position: relative;
            border: 15px solid transparent;
            border-width: (51/@rootsize)  (38/@rootsize)  (35/@rootsize)  (127/@rootsize);
            border-image-source: url(../images/border.png);
            border-image-slice: 51  38  35  127;
            margin-bottom: (20/@rootsize);
            .inner{
                position: absolute;
            //     background-color: pink;
                top: (-51/@rootsize);
                left:(-127/@rootsize);
                right:(-38/@rootsize);
                bottom: (-35/@rootsize);
                padding:(24/@rootsize) (36/@rootsize);
                
            }
        }
        // 信息
        .overview{
            height: (110/@rootsize);
            ul{
                display: flex;
                justify-content: space-between;
                li{
                    h3{
                        color:#fff;
                        font-size:(26/@rootsize);
                        margin: 0 0 (8/@rootsize) (4.8/@rootsize);
                    }
                    span{
                        font-size: (12/@rootsize);
                        color: #4c9bfd;
                    }
                }
            }
        }
        // 监控
        .monitor{
            height: (480/@rootsize);
            .inner{
                padding:(24/@rootsize) 0;
                display: flex;
                flex-direction: column;
              .tabs{
                    padding: 0 (36/@rootsize);
                    margin-bottom: (18/@rootsize);
                    display: flex;
                    a{
                       color: #1950c4;
                       font-size: (14/@rootsize);
                       padding:0 (27/@rootsize);
                       &:first-child{
                         padding-left: 0;
                         border-right: (1/@rootsize) solid #fff;
                       }
                       &.active{
                           color: #fff;
                       }
                    }
               }
               //  neirong 
              .content{
                  flex: 1;
                  position: relative;
                  .head{
                    display: flex;
                    justify-content: space-between;
                    padding: (12/@rootsize) (36/@rootsize);
                    line-height: (14/@rootsize);
                    font-size: (14/@rootsize);
                    color: #fff;
                    background-color: rgba(255,255,255,0.2);
                  }
                  .marquee-view{
                    position: absolute;
                    bottom: 0;
                    top: (40/@rootsize);
                    left: 0;
                    right: 0;
                    overflow: hidden;
                    
                    .marquee{
                        animation: move 15s linear infinite;
                        .row{
                            display: flex;
                            justify-content: space-between;
                            color: #fff;
                            padding: (12/@rootsize) (36/@rootsize);
                            line-height: (14/@rootsize);
                            .icon-dot{
                                position: absolute;
                                left: (16/@rootsize);
                                opacity: 0;
                            }
                            &:hover{
                                background-color: rgba(255,255,255,0.2);
                                .icon-dot{
                                    opacity: 1;
                                }
                            }
                        }
                    }
                  }
               }
            }
           
        }
        // 点位统计
        .point{
            height: (340/@rootsize);
            h3{
                color: #fff;
                font-size: (16/@rootsize);
            }
            .chart{
                display: flex;
                margin-top: (24/@rootsize);
                justify-content: space-between;
                .pie{
                    width: (312/@rootsize);
                    height: (240/@rootsize);
                    margin-left: (10/@rootsize);
                }
                .data{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    width: (108/@rootsize);
                    padding: (36/@rootsize) (30/@rootsize);
                    box-sizing: content-box;
                    background-image: url(../images/rect.png);
                    background-size: cover;
                    h4{
                        font-size: (26/@rootsize);
                        color: #fff;
                        margin-bottom: (12/@rootsize);
                    }
                    span{
                        color: #fff;
                        font-size: (16/@rootsize);
                    }
                   
                }
            }
        }
    }
    .column:nth-child(2){
        flex: 4;
        margin: (32/@rootsize) (20/@rootsize) 0;
    }
}


@keyframes move {
    0%{

    }
    100%{
        transform: translateY(-50%);
    }
}